        var arroww = -window.innerWidth;
        var sendtext = document.getElementById('text-input')
        var arrow = document.getElementById("arrow");
        var msg = document.getElementById("msg");
        var msgcontain = document.getElementById('msg-contain')
        var sendbutton = document.getElementById("send")
        var textcontain = document.getElementById("text-contain")
        var text = document.getElementById("text")
        var color = document.getElementById("color")
        var msgbuttona = document.getElementById("msgbuttona")
        var apng = document.getElementById("apng")
        var png = document.getElementsByClassName("png")
        var timer, msgtimer; //封装用于多次点击
        var tiemrb = new Boolean();
        timerb = true;
        var windouh = window.innerHeight;
        var body = document.body;
        var tan = document.getElementById('tan')
        var tancontent = document.getElementById('tan-content')
        body.style.height = windouh + 'px';

        var arrowtimer = function() {
            timer = setTimeout(function() {
                msg.style.display = "none";
                text.style.height = "100%";
                timerb = false;
            }, 3000);
        }
        var colortimer = function() {
            msgtimer = setTimeout(function() {
                msgcontain.style.right = "0"
                timerb = true;
            }, 100);
        }
        arrow.addEventListener('click', function() {
            if (tiemrb) {
                clearTimeout(msgtimer)
                msgcontain.style.right = "200%"
                console.log(this.style.zIndex)
                arrowtimer();
            }
            // animate(msg,arroww);
            // arrow.style.display="none"
        })
        color.addEventListener('click', function() {
            if (!timerb) {
                clearInterval(timer)
                msg.style.display = "block";
                text.style.height = "80%";
                colortimer();
            }
        })

        msgbuttona.addEventListener('click', function() {
            apng.style.display = "block"
        })

        function getCaption(obj) { //获取/后字符串的函数
            var index = obj.lastIndexOf("\/");
            obj = obj.substring(index + 1, obj.length);
            return obj;
        }
        for (i = 0; i < png.length; i++) {
            png[i].addEventListener('click', function() {
                apng.style.display = "none";
                src = getCaption(this.childNodes[0].src);
                sendtext.innerHTML += `<img src="picture/` + src + `" alt="">`;
            })
        }


        var socket = new WebSocket("ws://43.129.70.25:8080/websocket");

        socketinit(socket);
        var signed = false;
        var count = 0;
        var tipMsg = false;
        var prm = +new Date();
        var sendmsg = function() {


            var t2 = +new Date();
            if (t2 - prm > 1000 * 10) {
                prm = t2;
                count = 0;
            }
            if (count > 5) {
                tan.style.display = "block"
                tancontent.innerHTML = "宁频率太快了，请稍后再发"
                tipMsg = true
                return;
            }

            
            var value = sendtext.innerHTML;
            sendtext.innerHTML = '';
            value = value.replace(/<br>/g, '').trim()
                // console.log(value);
                var emj=value.match(/<img[^>]+>/g);
                var mactest=value.replace(/<img[^>]+>/g,'')
                var emjcount;
                if(emj==null){
                     emjcount=0;
                    
                }else{
                    emjcount=emj.length;
                }
               
            if (mactest.length +emjcount> 50) {
                tan.style.display = "block"
                tancontent.innerHTML = "内容过长"
                tipMsg = true
                return;
            }
            if (value != '') {
                if (socket.readyState == 1) {
                    socket.send(JSON.stringify({
                            type: 'text',
                            data: value
                        })) //给socket发送消息
                    sendtext.value = '';
                    sendtext.focus();
                    count++;
                } else {
                    tan.style.display = "block";
                    tipMsg = true;
                    tancontent.innerHTML = "尚未连接，请稍后~"
                }
            } else {
                tan.style.display = "block";
                tipMsg = true;
                tancontent.innerHTML = "不可以发空消息哦"
            }
        }

        sendbutton.onclick = sendmsg
        var heart = 0;
        var rec = 0;
        var reCe = false; //是否因为重连才谈的框
        //初始化websocket

        function cls() {
            document.getElementsByClassName('tan')[0].style.display = 'none'
            reCe = false;
        }

        function socketinit(socket) {
            socket.addEventListener('open', function(e) {

                signed = true;
                rec = 0;
                heart = 0;
                if (reCe) {
                    tan.style.display = "none";
                    reCe = false;
                }
            })
            socket.addEventListener('message', function(e) {

                var data = JSON.parse(e.data)
                if (data.type == 'hbt') {
                    heart = 0;
                    return;
                }
                // var textw = text.offsetWidth;
                // var texth = text.offsetHeight;
                // var data = JSON.parse(e.data)
                var dv = document.createElement('div')

                if (!signed) {
                    tan.style.display = "block";
                    tancontent.innerHTML = "宁还没有连接成功哦，再等等或者刷新试试~"
                } else if (data.type != 'login' && data.type != "logout") {
                   var emj=data.data.match(/<img[^>]+>/g);
                var mactest=data.data.replace(/<img[^>]+>/g,'')
                var emjcount;
                if(emj==null){
                     emjcount=0;
                    
                }else{
                    emjcount=emj.length;
                }
               
            if (mactest.length +emjcount> 50) {
               
                return;
            }
                    dv.innerHTML = data.data;

                    n = parseInt(Math.random() * 90); //设置90防止信息跑出框
                    dv.style.top = n + '%'; //随机出现高度
                    dvw = dv.offsetWidth;
                    dv.className = "dvp";
                    dv.style.right = dvw + 'px';
                    // label.className = "label";
                    textcontain.prepend(dv); //在已有节点前插入盒子
                    // time=setInterval(function()  {
                    //     dv.style.right=textw+'px'
                    // }, 100);
                    dv.addEventListener("webkitAnimationEnd", function() {
                        textcontain.removeChild(dv);
                    })
                }

            })
            socket.addEventListener("close", (event) => {
                console.log("连接断开");
                tan.style.display = "block";
                tancontent.innerHTML = "啊噢，不小心断线了.."
                reCe = true;
            })

            socket.addEventListener("error", (event) => {
                console.log("发生错误，重连");
                tan.style.display = "block";
                tancontent.innerHTML = "出错了，重连中.."
                reCe = true;
                // recont();
            })
        }

        var recont = function() {
            socket = new WebSocket("ws://43.129.70.25:8080/websocket");
            socketinit(socket);
        }

        var wbint = setInterval(function() {

            if (socket.readyState == 0) {
                return;
            }
            if (socket.readyState == 1) {
                socket.send(JSON.stringify({
                    type: 'hbt'
                }))
            }


            heart = heart + 1;

            if (heart > 3) {
                console.log("长时间无响应，正在重连...");
                // tan.style.display = "block"; istan=true;
                // tancontent.innerHTML = "长时间无响应，正在重连..."
                rec++;
                if (socket.readyState == 1) {
                    socket.close();
                }
                recont();
            }
            //10次的话你真连不上了
            if (rec > 10) {
                clearInterval(wbint);
                console.log("连接失败，请检查网络连接");
                // tan.style.display = "block"; istan=true;
                // tancontent.innerHTML = "连接失败，请检查网络连接"
            }
        }, 6000)

        //key监听 按下时

        var key = document.querySelector("#text-input");
        key.onkeydown = function(e) {
            if (e.keyCode == 13) {
                return false;
            }

        }
        key.addEventListener('keyup', function(e) {
                if (e.keyCode == 13) {
                    if (tipMsg) {
                        tipMsg = false;
                        tan.style.display = 'none';
                        return;
                    }
                    sendmsg();
                    // sendtext.blur();
                    // tan.focus();
                }
            })
            // tan.onkeydown =function(e){
            //     return false;
            // }
            // tan.addEventListener('keyup',function(e){
            //     if(e.keyCode==13){
            //         cls();
            //         sendtext.focus();
            //     }
            // })